irongit
Sign inRegister
huncholanehuncholane/dotfilesPublic

Not for normies

dotfiles/waybar/style/[Wallust Bordered] Chroma Simple.css
312 lines5.3 KBCSS
RawDownloadHistory
1/* ----------- 💫 https://github.com/JaKooLit 💫 -------- */
2/* Wallust Bordered - Chroma Simple */
3
4@import '../../.config/waybar/wallust/colors-waybar.css';
5
6
7* {
8 font-family: "JetBrainsMono Nerd Font";
9 font-weight: bold;
10 /* set font-size to 100% if font scaling is set to 1.00 using nwg-look */
11 font-size: 97%;
12 min-height: 0;
13}
14
15window#waybar {
16 background-color: transparent;
17 color: @foreground;
18 padding-left: 15px;
19 padding-right: 15px;
20}
21
22window#waybar.empty,
23window#waybar.empty #window {
24 background-color: transparent;
25 padding: 0px;
26 border: 0px;
27}
28
29tooltip {
30 background-color: @color12;
31 color: @foreground;
32 border-radius: 10px;
33 border-width: 1.5px;
34 border-style: solid;
35 border-color: @color9;
36 transition: 0.3s;
37 opacity: 0.9;
38}
39
40#taskbar button,
41#workspaces {
42 border-radius: 20px;
43 background: @background;
44 opacity: 1;
45 padding: 0px 10px;
46 margin: 0;
47 margin-top: 5px;
48 border: 2px solid @color12;
49}
50
51#workspaces button {
52 color: @color10;
53 box-shadow: none;
54 text-shadow: none;
55 padding-right: 12px;
56 border-radius: 9px;
57 animation: gradient_f 20s ease-in infinite;
58 transition: all 0.5s cubic-bezier(.55,-0.68,.48,1.682);
59}
60
61#taskbar button.active,
62#workspaces button.active {
63 color: @color12;
64 padding-right: 12px;
65 background-color: @background;
66 animation: gradient_f 20s ease-in infinite;
67 transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682);
68}
69
70#workspaces button.urgent {
71 color: #11111b;
72 border-radius: 10px;
73}
74
75#taskbar button:hover,
76#workspaces button:hover {
77 color: @color12;
78 padding-left: 0px;
79 padding-right: 2px;
80 animation: gradient_f 20s ease-in infinite;
81 transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682);
82}
83
84#backlight,
85#backlight-slider,
86#battery,
87#bluetooth,
88#clock,
89#cpu,
90#disk,
91#idle_inhibitor,
92#keyboard-state,
93#memory,
94#mode,
95#mpris,
96#network,
97#power-profiles-daemon,
98#pulseaudio,
99#pulseaudio-slider,
100#taskbar,
101#temperature,
102#tray,
103#window,
104#wireplumber,
105#custom-backlight,
106#custom-browser,
107#custom-cava_mviz,
108#custom-cycle_wall,
109#custom-dot_update,
110#custom-file_manager,
111#custom-keybinds,
112#custom-keyboard,
113#custom-light_dark,
114#custom-lock,
115#custom-hint,
116#custom-hypridle,
117#custom-menu,
118#custom-playerctl,
119#custom-power_vertical,
120#custom-power,
121#custom-quit,
122#custom-reboot,
123#custom-settings,
124#custom-spotify,
125#custom-swaync,
126#custom-tty,
127#custom-updater,
128#custom-weather,
129#custom-weather.clearNight,
130#custom-weather.cloudyFoggyDay,
131#custom-weather.cloudyFoggyNight,
132#custom-weather.default,
133#custom-weather.rainyDay,
134#custom-weather.rainyNight,
135#custom-weather.severe,
136#custom-weather.showyIcyDay,
137#custom-weather.snowyIcyNight,
138#custom-weather.sunnyDay {
139 border-radius: 20px;
140 background: @background;
141 opacity: 1;
142 padding: 0px 10px;
143 margin: 0;
144 margin-top: 5px;
145 border: 2px solid @color13;
146}
147
148#cpu {
149 border: 2px solid @color5;
150 color: @foreground;
151 background: @color12;
152}
153
154#memory {
155 color: @foreground;
156 background: @color12;
157}
158
159#disk {
160 color: @foreground;
161 background: @color12;
162 border: 2px solid @color13;
163}
164
165#temperature{
166 color: @foreground;
167 background: @color12;
168}
169
170#temperature.critical {
171 color: red;
172 border: 2px solid red;
173}
174
175#custom-power {
176 color: red;
177 padding-left: 10px;
178 padding-right: 2px;
179 border: 2px solid red;
180}
181
182#backlight {
183 color: #f9e2af;
184 padding-right: 5px;
185}
186
187#tray {
188 border-radius: 20px;
189 margin-right: 5px;
190/* padding: 0px 4px; */
191 padding-left: 15px;
192 padding-right: 15px;
193 border: 2px solid @color7;
194}
195
196#mpris {
197 padding-left: 16px;
198}
199#tray.empty {
200 background-color: transparent;
201 border-color: transparent;
202 border: 0px;
203}
204
205#window {
206 margin-left: 5px;
207 margin-right: 5px;
208 border: 2px solid @color9;
209}
210
211#clock {
212 color: #fab387;
213}
214
215
216#bluetooth {
217 color: #b4befe;
218 margin-right: 10px
219}
220
221#pulseaudio.microphone,
222#pulseaudio {
223 background-color: @color12;
224 color: #89b4fa;
225 border: 2px solid @color13;
226}
227
228#pulseaudio.muted {
229 color: #f38ba8;
230 padding-right: 20px;
231}
232
233#battery {
234 color: #a6e3a1;
235 margin-right: 5px;
236 padding-right: 15px;
237 border: 2px solid @color14;
238}
239
240/*-----Indicators----*/
241#custom-hypridle.notactive,
242#idle_inhibitor.activated {
243 color: #39FF14;
244}
245
246#battery.good {
247 color: #ffd57a;
248 border: 2px solid @color15;
249}
250
251#battery.warning {
252 color: #fab387;
253 border-left: 0px;
254 border: 2px solid @color12;
255}
256
257#battery.charging {
258 color: #a6e3a1;
259}
260
261#battery.critical {
262 color: #f38ba8;
263 border-left: 0px;
264 border: 2px solid @color8;
265}
266
267@keyframes blink {
268 to {
269 color: @color12;
270 }
271}
272
273#battery.critical:not(.charging) {
274 background-color: red;
275 color: white;
276 animation-name: blink;
277 animation-duration: 3.0s;
278 animation-timing-function: steps(12);
279 animation-iteration-count: infinite;
280 animation-direction: alternate;
281 box-shadow: inset 0 -3px transparent;
282}
283
284#custom-weather {
285 color: #8eacf3;
286 border-right: 0px;
287 margin-left: 0px;
288 margin-right: 5px;
289}
290
291#backlight-slider slider,
292#pulseaudio-slider slider {
293 min-width: 0px;
294 min-height: 0px;
295 opacity: 0;
296 background-image: none;
297 border: none;
298 box-shadow: none;
299}
300
301#backlight-slider trough,
302#pulseaudio-slider trough {
303 min-width: 80px;
304 min-height: 5px;
305 border-radius: 5px;
306}
307
308#backlight-slider highlight,
309#pulseaudio-slider highlight {
310 min-height: 10px;
311 border-radius: 5px;
312}